<script setup lang="ts">
// 接收父组件的数据
const props = defineProps<{
  performanceGrade: any
  nameData: any
}>()
</script>
<template>
  <div class="human-tab">
    <ul>
      <li class="first-li">
        <img src="@/assets/images/human/dimission-img.png" alt="" />
      </li>
      <li class="last-li">
        <span>
          {{ nameData }}
        </span>
        <p>
          {{ performanceGrade }}
        </p>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.human-tab {
  width: 100%;
  height: 260px;
  ul {
    width: 100%;
    height: 210px;
    display: flex;
    justify-content: center;
    align-items: end;

    li {
      width: 150px;
      height: 150px;
      background-position: center;
      background-repeat: no-repeat;

      span {
        background: -webkit-linear-gradient(#2ec3ce, #00efb7);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        top: 7px;
        font-size: 30px;
      }
    }

    .last-li {
      background-image: url('@/assets/images/human/dimission.png');
      background-size: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      p {
        font-size: 12px;
        position: relative;
        top: 50px;
      }
    }
  }
}
</style>
